/**
 * Created by 小敏哥 on 2017/11/27.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import BottomMenu from '../../../../../../../src/js/components/bottomMenu';
import CarItem from '../../components/home/carItem'
import {getCarList} from '../../actions/homeAction'
import {Toast} from 'antd-mobile';
import style from './index.scss';
import common from "../../../../../../js/utils/common";

class Home extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        common.setViewTitle('违章');
        this.props.dispatch(getCarList({}));
    }

    componentWillUnmount() {
    }

    //底部跳转
    bottomHandle(index) {
        if (index == 0) {
            this.context.router.push('/');
        }
        else {
            this.context.router.push('orderList');
        }
    }

    //构建车辆列表
    structCarList() {
        console.log(this.props.carList);
        return this.props.carList && this.props.carList.length > 0 ? this.props.carList.map((item, index) => {
            return <div className={style.content} key={item.carNumber}>
                <CarItem carNumber={item.carNumber} fine={item.fineTotalAmount} degree={item.degreeCount}
                         count={item.voliationCount} carId={item.carId}/>
            </div>
        }) : ''
    }

    goToAddCar() {
        if(this.props.carList.length>=3){
            Toast.info('您最多可添加3辆车',2);
        }
        else {
            this.context.router.push('addCar');
        }
    }

    render() {
        return <div className={style.home}>
            <img src="./images/wx_app_violation.png" className={style.headerImg}/>
            {this.structCarList()}
            {this.props.carList && this.props.carList.length > 0 ?
                <div className={style.add} onClick={this.goToAddCar.bind(this)}>
                    <div><img src="./images/icon-add-btn.png"/><span>添加车辆查办违章</span></div>
                </div> : ''}
            {!this.props.carList || this.props.carList.length == 0 ? <div className={style.emptyContent}  onClick={this.goToAddCar.bind(this)}>
                <img src="./images/icon-add.png"/>
                <div>添加车辆查违章</div>
                <div>支持在线办理违章，还能享受违章消息通知</div>
            </div> : ''}
            {/*底部导航菜单start*/}
            <BottomMenu active={0} onChange={(index) => {
                this.bottomHandle(index);
            }} data={[{
                text: '查办违章',
                img: './images/query.png',
                checkedImg: './images/query_checked.png'
            }, {text: '我的订单', img: './images/my.png', checkedImg: './images/my_checked.png'}]}/>
            {/*底部导航菜单end*/}</div>
    }
}

//使用context
Home.contextTypes = {
    router: React.PropTypes.object.isRequired
};


function mapStateToProps(state) {
    return Object.assign({}, state.homeInfo);
}

export default connect(mapStateToProps)(Home);

